<template>
	<view class="content">

		<view class="Btitle">
			壁纸小程序
		</view>

		<view class="input">
			<uni-search-bar placeholder="请搜索壁纸" bgColor="rgba(247, 247, 247, 0.8)" :radius="30" @confirm="search"
				v-model="searchValue" @input="input">
			</uni-search-bar>
		</view>

		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="item in data.banners" :key="item">
				<image :src="item" mode="aspectFill"></image>
			</swiper-item>
		</swiper>

		<view class="tg">
			<uni-notice-bar scrollable background-color="rgb(245 245 245)" color="rgba(0, 0, 0, 0.58)" show-icon
				text="声明:此项目图片及其接口资源来自网络,仅限学习,勿作他用!!" />
		</view>

		<scroll-view :scroll-x="true" class="scrollview-box">
			<block v-for="(item,index) in data.scrollList" :key="index">
				<view class="item" @click="detail(item.id)">
					<image :src="item.img"></image>
					<view class="tit">
						<view>{{item.name}}</view>
					</view>
				</view>
			</block>
		</scroll-view>


		<view class="box">
			<view class="title fw">
				<span>热门壁纸</span>
				<span @click="detail(36)">更多>></span>
			</view>

			<view class="lists-two">
				<view class="item" v-for="(item,index) in data.hotList" :key="index" @click="yu(index)">
					<image :src="item.url" mode="aspectFill" lazy-load></image>
					<view class="title bx">
						<image src="../../static/play.png" mode=""></image>
						<view>{{item.fav_total}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive
	} from "vue";

	const data = reactive({
		banners: [
			'http://p16.qhimg.com/t01db9a3c3251d45fd7.jpg',
			'http://p19.qhimg.com/t01ea9d2a1d02d5c8bb.jpg'
		],
		// 壁纸类别
		scrollList: [],
		// 推荐壁纸
		hotList: [],
	})

	// 回车搜索
	function search(res) {
		// 传值到搜索页面
		uni.navigateTo({
			url: "/pages/searchPage/searchPage?keyWord=" + res.value
		})
	}

	// 获取横向滚动壁纸-壁纸类别
	function getScrollList() {
		uni.request({
			method: "GET",
			url: '/api/index.php?c=WallPaperAndroid&a=getAllCategories',
			data: {},
			success: (res) => {
				console.log(res);
				// 分类数据没有图片 这里在数据里面添加一个img字段
				let poster = [
					'https://p16.qhimg.com/t01ac1f1a03c8a98652.jpg',
					'https://p18.qhimg.com/t016867136d232768ff.jpg',
					'https://p16.qhimg.com/t0145bde71fed9b5fb2.jpg',
					'https://p19.qhimg.com/t0151309202cd85dc7a.jpg',
					'https://p16.qhimg.com/t0162c7bbaa3c7817b1.jpg',
					'https://p16.qhimg.com/t018417de2ff2756584.jpg',
					'https://p16.qhimg.com/t01db9a3c3251d45fd7.jpg',
					'https://p16.qhimg.com/t010b9ecaada8ae2d83.jpg',
					'https://p15.qhimg.com/t015a04707e3a232d49.jpg',
					'https://p19.qhimg.com/t01ea9d2a1d02d5c8bb.jpg',
					'https://p18.qhimg.com/t012ca049ae2eee29cb.jpg',
					'https://p19.qhimg.com/t0186debcc15bb50bc7.jpg',
					'https://p18.qhimg.com/t0146d52c9b825bcf59.jpg',
					'https://p16.qhimg.com/t01945140de9d2e1289.jpg',
					'https://p17.qhimg.com/t0195f5de4bb1b353bb.jpg',
					'https://p4.qhimg.com/bdr/__85/d/_sjzs/didaxianshi141120/the_world_in_a_bubble.jpg',
				]
				res.data.data.forEach((v, i) => {
					console.log(v, "111");
					poster.forEach((v2, i2) => {
						if (i == i2) {
							console.log(v2, "222");
							v.img = v2
						}
					})
				})
				data.scrollList = res.data.data
				console.log(data.scrollList);
			}
		})
	}

	// 获取推荐壁纸
	function getHotList() {
		uni.showLoading({
			title: "壁纸获取中..."
		})
		uni.request({
			method: "GET",
			url: '/api/index.php?c=WallPaperAndroid&a=getAppsByCategory&cid=11&start=0&count=12',
			data: {},
			success: (res) => {
				uni.hideLoading()
				console.log(res);
				data.hotList = res.data.data
				console.log(data.hotList);
			}
		})
	}

	// 预览图片
	function yu(index) {
		// 取出列表中所有的图片链接
		let urls = data.hotList.map(v => v.url)
		uni.previewImage({
			urls: urls, // 预览链接数组
			current: index // 当前图片的索引
		});
	}


	function detail(id) {
		uni.navigateTo({
			url: "/pages/list/list?id=" + id
		})
	}

	onMounted(() => {
		getScrollList();
		getHotList();
	})
</script>

<style scoped lang="scss">
	.content {
		padding: 40rpx 0;
		background: linear-gradient(to bottom, #ffaa00, #ffffff, #ffffff, #ffffff, #ffffff);
		background:
			linear-gradient(to bottom, transparent, #fff 260px),
			radial-gradient(20% 150px at 70% 230px, rgba(170, 170, 255, 0.4), transparent),
			radial-gradient(20% 150px at 70% 230px, rgba(170, 255, 255, 0.34), transparent),
			radial-gradient(50% 300px at 90% 100px, rgba(212, 230, 241, 0.48), transparent),
			#FFF0F5;

		.u-swiper-wrap {
			border-radius: 15upx !important;
			margin: 20rpx 0 !important;
		}

		.phb {
			height: auto;
		}

		.Btitle {
			padding: 0 20rpx;
			font-size: 38rpx;
			font-weight: 700;
			color: #000;
		}
	}

	.tg {
		padding: 0 20rpx;
		border-radius: 40rpx;
	}

	swiper {
		width: 96%;
		height: 300rpx;
		margin: 20rpx auto;
	}

	swiper swiper-item {
		height: 100%;
		border-radius: 20rpx;
	}

	swiper-item image {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}

	.scrollview-box {
		white-space: nowrap;
		width: 100%;
		padding: 20rpx 20rpx 0rpx 20rpx;
	}

	.uni-noticebar {
		margin-bottom: 0;
	}

	.scrollview-box .item {
		width: 300rpx;
		height: 200rpx;
		margin-right: 20rpx;
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		border-radius: 10rpx;
		overflow: hidden;
		position: relative;
	}

	.scrollview-box .item image {
		width: 300rpx;
		height: 100%;
	}

	.scrollview-box .item .tit {
		position: absolute;
		top: 0%;
		left: 50%;
		transform: translate(-50%, 0%);
		font-size: 28rpx;
		width: 100%;
		height: 200rpx;
		line-height: 200rpx;
		display: flex;
		justify-content: center;
		background-color: rgba(0, 0, 0, 0.42);
		color: #fff;
	}

	.lists-two {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 25rpx;
	}

	.lists-two .item {
		position: relative;
		width: 48.5%;
		height: 250rpx;
		margin-bottom: 30rpx;
		overflow: hidden;
	}

	.lists-two .item image {
		width: 100%;
		height: 100%;
		margin-bottom: 10rpx;
		border-radius: 12rpx;
	}

	.lists-two .item .title {
		position: absolute;
		font-size: 28rpx;
		font-weight: 500;
		width: 100%;
		bottom: 0;
		left: 10rpx;
		color: #dedede;
		text-align: center;
	}

	.bx {
		display: flex;
		justify-content: start;
	}

	.lists-two .item .title image {
		width: 32rpx !important;
		height: 32rpx;
		margin-right: 15rpx;
	}



	.box {
		padding: 30rpx 25rpx;
	}

	.cateBox {
		padding: 20rpx 10rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.c-item {
		width: 20%;
		height: 100%;
		text-align: center;
	}

	.c-item image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx;
	}

	.c-item .tit {
		font-size: 28rpx;
		margin-top: 10rpx;
	}

	.title {
		font-size: 34rpx;
		font-weight: 700;
	}

	.h-item {
		height: 140rpx;
		margin-top: 25rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		border-radius: 10rpx;
		background-color: rgba(255, 255, 255, 0.25);
		padding: 10rpx 20rpx;
		box-sizing: border-box;
	}

	.h-item .left image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx;
		margin-right: 30rpx;
	}

	.h-item .info {
		width: 60%;
	}

	.h-item .info .tit {
		font-size: 30rpx;
		font-weight: 700;
	}

	.h-item .info .auther {
		font-size: 26rpx;
		margin-top: 10rpx;
		color: #999;
	}

	.icons {
		text-align: end;
		width: 20%;
		font-size: 28rpx;
		color: #999;
	}


	.fx {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.input {
		width: 96%;
		margin: 15rpx auto 10rpx;
	}

	.fw {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.fw span:nth-child(2) {
		font-size: 26rpx;
		font-weight: 500;
		color: #999;
	}

	.uni-noticebar {
		border-radius: 20px;
	}

	.uni-searchbar {
		padding: 10px 0;
	}
</style>